<template lang='pug'>
  section
    van-nav-bar(
      title="我的银行卡"
      left-arrow
      @click-left="$router.back()"
      )
    van-popup(v-model="popupShow" :overlay="false" position="right")
      van-nav-bar(
        title="添加银行卡"
        left-arrow
        right-text="添加"
        @click-right="addBank"
        @click-left="popupShow = false"
        )
      bankcard
    .card(:style="{backgroundColor: radomBg()}")
      .card-logo(:style="{backgroundImage: `url(//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg)`}")
      .card-info
        .cardname 工行
        .cardname 借记卡
        .cardnumber **** **** **** 1234

    van-button(@click="popupShow = true") 添加银行卡
</template>

<script type='text/ecmascript-6'>
  import bankcard from '~/components/bankcard'

  export default {
    components: {
      bankcard
    },
    data() {
      return {
        popupShow: false
      }
    },
    methods: {
      radomBg(){
        return '#'+Math.floor(Math.random()*256).toString(10);
      },
      addBank() {
        this.popupShow = false
      }
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
.van-popup
  min-height 100vh
.card
  padding 1rem
  margin 1rem
  border-radius 2px
  line-height 1.3
  display flex
  color $color-white
  &-logo
    margin-right 1rem
    width 5rem
    height 5rem
  .cardnumber
    margin-top 2rem
    font-size $fsz-large-x
</style>
